<template>
  <view>
		<productConSwiper :imgUrls="imgUrls"></productConSwiper>
		<view class="info">
			<view>
				<view class="name">烧肉居酒屋（源著天街店）</view>
				<view class="score"></view>
				<view class="desc">渝北区 红山路龙湖源著天街5楼</view>
				<view class="desc">营业时间 ：9:00-21:00</view>
			</view>

			<view class="kefu" @click="couponTap2">
				<view class="iconfont icon-kefu"></view>
				<view>联系他</view>
			</view>

			<view @click="setCollect" class='shoucang'>
				<view class='iconfont icon-shoucang1' v-if="storeInfo.isRelation"></view>
				<view class='iconfont icon-shoucang' v-else></view>
				<view>收藏</view>
			</view>

		</view>
		<view class="notice-title">用户评价</view>
		<view class="comment" v-for="(item, index) in 10" :key="index">
			<view class="avatar">
				<image class="image"></image>
			</view>
			<view class="body">
				<view class="name">玥玥</view>
				<view class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus</view>
				<view class="images">
					<image class="image"></image>
					<image class="image"></image>
					<image class="image"></image>
				</view>
			</view>
		</view>
  </view>
</template>

<script>
import productConSwiper from '@/components/productConSwiper/index.vue'
export default {
	components: {productConSwiper},
	data(){
		return {
			imgUrls: ['']
		}
	}
}
</script>

<style lang="scss">
page{
	background: #fff;
}

.info{
	position: relative;
	.name{
		margin: 20rpx 30rpx 0;
		font-size: 32rpx;
    font-weight: 700;
	}

	.score{
		height: 50rpx;
	}

	.desc{
		 margin: 0 30rpx;
		font-size: 24rpx;
		color: #82848f;
		margin-top: 0rpx;
	}

	.kefu{
		font-size: 18rpx;
		text-align: center;

    color: #666;
	position: absolute;
	top: 10rpx;
	right: 30rpx;
	}
	.shoucang{
		font-size: 18rpx;
		text-align: center;
    color: #666;
	position: absolute;
	top: 10rpx;
	right: 100rpx;
	}
}
.notice-title {
  font-size: 28rpx;
  color: #333;
  margin: 30rpx;
  font-weight: bold;
}
.comment{
	position: relative;
	margin:  0 30rpx;
	padding-left: 80rpx;

	.avatar{
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		left: 0;
		top: 0;
		.image{
			width: 100%;
			height: 100%;
			border-radius: 50%;
			background: #eee;
		}
	}
	.body{
		.name{
			line-height: 60rpx;
		}
		.content{
			
		}
		.images{
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;
		}
		.image{
			width: 130rpx;
			height: 130rpx;
			border-radius: 6rpx;
			background: #eee;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
	}
}
</style>